<template>
  <div>
    <router-view></router-view>
    <!-- 固定导航栏 -->
    <footer>
 
      <!-- 图片无法循环 不循环的话转换成svg了 循环后不是svg的 应该是内部进行处理了 已解决 路径js写在public的绝对路径即可 -->
      <!-- 点击切换图片无法对应显示 router-link的to和click冲突了，所以跳转不了 有to就不要用点击事件了 已解决-->
      <!-- 点击同一图标，路径重复跳转 已解决  在index.js加重复路由跳转的问题 -->
      <!-- 首页刷新不显示亮图  正在解决 -->
      <a
        v-for="(item, index) in navBar"
        :key="item.id"
        @click="change(index)"
        :class="{ active: index === selectIndex }"
        dot
      >
        <img
          :src="index === selectIndex ? item.imgUrlSel : item.imgUrlUnSel"
          alt=""
        />
        <span>{{ item.name }}</span>
      </a>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0,
      navBar: [
        {
          id: 1,
          name: "商城",
          imgUrlUnSel: "/images/icon/nav/home/unselected.png",
          imgUrlSel: "/images/icon/nav/home/selected.png",
          path: "/index/home",
        },
        {
          id: 2,
          name: "分类",
          imgUrlUnSel: "/images/icon/nav/classify/unselected.png",
          imgUrlSel: "/images/icon/nav/classify/selected.png",
          path: "/index/cate",
        },
        {
          id: 3,
          name: "购物车",
          imgUrlUnSel: "/images/icon/nav/shoppingcart/unselected.png",
          imgUrlSel: "/images/icon/nav/shoppingcart/selected.png",
          path: "/index/cart",
        },
        {
          id: 4,
          name: "我的",
          imgUrlUnSel: "/images/icon/nav/user/unselected.png",
          imgUrlSel: "/images/icon/nav/user/selected.png",
          path: "/index/mine",
        },
      ],
    };
  },
  methods: {
    change(index) {
      this.selectIndex = index;
      this.$router.push(this.navBar[index].path);
    },
  },
  mounted() {
    console.log(this.$route.path);
    this.selectIndex=this.navBar.findIndex(item=>item.path===this.$route.path);
     document.title=this.$route.meta.title
  },
};
</script>

<style scoped>
footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 0.83rem;
  display: flex;
  background-color: #fff;
  overflow: hidden;
}
footer a {
  flex: 1;
  height: 100%;
  font-size: 0.12rem;
  color: #999999;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
a img {
  width: 0.3rem;
  height: 0.3rem;
}
.active {
  color: #e2925f;
}
</style>